<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane v-for="item in tabPanes" :key="item.configType" :label="item.label" :name="item.configType">
      <template v-if="activeName === item.configType">
        <list :list="page.list" @refresh="handlePage"></list>
        <div style="height: 20px"></div>
      </template>
    </el-tab-pane>
  </el-tabs>
</template>
<script setup>
  import { ref } from 'vue'
  import List from './List.vue'
  import { systemApi } from '@/api/system'
  import useTable from '@/utils/table'

  const activeName = ref('1')
  const tabPanes = [
    {
      label: '站点设置',
      configType: '1'
    },
    {
      label: '登录设置',
      configType: '2'
    },
    {
      label: '存储设置',
      configType: '5'
    },
    {
      label: '短信设置',
      configType: '6'
    },
    {
      label: '支付设置',
      configType: '7'
    },
    {
      label: '大模型设置',
      configType: '8'
    }
  ]

  // 切换顶部tab
  const handleClick = async (tab) => {
    query.configType = tab.props.name
    await handlePage()
  }

  // 基础功能
  const { page, handlePage, query } = useTable(
    {
      page: systemApi.sysConfigList
    },
    { configType: activeName.value }
  )
</script>
<style lang="scss" scoped>
  :deep(.el-tabs__nav) {
    width: 200px;
  }
</style>
